﻿<template>
  <div>
    <h1>V-model双向绑定</h1>
    <!-- Basic v-model usage -->
    <div>
      <h2>基础的 v-model:</h2>
      <VModelComponent v-model:basicText="basicText" />
      <p>输出内容: {{ basicText }}</p>
    </div>

    <!-- v-model with argument -->
    <div>
      <h2>v-model 计算属性传递:</h2>
      <VModelComponent v-model:title="bookTitle" />
      <p>Book Title: {{ bookTitle }}</p>
    </div>

    <!-- v-model with capitalize modifier -->
    <div>
      <h2>v-model with capitalize modifier:</h2>
      <VModelComponent v-model:capitalizeText="formattedText" />
      <p>Formatted Text: {{ formattedText }}</p>
    </div>

    <!-- Multiple v-model bindings on a single component -->
    <div>
      <h2>Multiple v-model bindings:</h2>
      <VModelComponent
          v-model:first-name.capitalize="firstName"
          v-model:last-name="lastName"
      />
      <p>First Name: {{ firstName }}</p>
      <p>Last Name: {{ lastName }}</p>
    </div>
  </div>
</template>

<script>
import VModelComponent from './Components/VModelComponent.vue';

export default {
  components: {
    VModelComponent
  },
  data() {
    return {
      basicText: '',
      bookTitle: '',
      formattedText: '',
      firstName: '',
      lastName: ''
    };
  }
}
</script>
